<template>
  <div>
    <div class="dashboard-container">
      <div class="big-back-box">
        <div class="top">订单管理</div>
        <div style="height: 20px"></div>
        <el-card class="box-card" style="margin: 0 auto">
          <!-- 条件搜索 -->
          <div style="height: 20px; color: #409eff; line-height: 20px">
            状态
          </div>
          <br />
          <el-form :inline="true" class="demo-form-inline">
            <!-- 状态 -->
            <el-select v-model="searchState" placeholder="请选择状态">
              <el-option
                v-for="item in stateList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-form-item>
              <!-- <span>this.searchState:{{ this.searchState }}</span> -->
            </el-form-item>
            <!-- 查询按钮 -->
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
          </el-form>

          <!-- 列表 -->
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="订单ID" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.id }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="采买方ID" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.buyerId }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="订单类型" align="center" width="100">
              <template slot-scope="{ row }">
                <span>{{ row.type }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center" width="150">
              <template slot-scope="{ row }">
                <span>{{ row.state }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="金额" align="center" width="125">
              <template slot-scope="{ row }">
                <span>{{ row.money }}</span>          
              </template>
            </el-table-column>
            <el-table-column label="是否付款" align="center" width="100">
              <template slot-scope="{ row }">
                <!-- <span>{{ row.paymentOrNot }}</span>   -->
                <span v-if="row.paymentOrNot=='on'">是</span>
                <span v-if="row.paymentOrNot=='off'">否</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="180">
              <template slot-scope="{ row }">
                <router-link
                  :to="{ path: '/lawyerOrder/readMore', query: row }"
                >
                  <el-button type="text">详情</el-button>
                </router-link>
                <!-- 在此处要加上依据不同状态出现不同按钮的功能 -->
                <el-button
                  v-if="row.state == '处理中'"
                  type="text"
                  style="margin-left: 20px"
                  @click="handleUpdate(row)"
                  >处理</el-button
                >
                <!-- <el-button
                  type="primary"
                  size="mini"
                  @click="handleUpdate(row)"
                  :disabled="row.state == '处理中'"
                >
                  编辑
                </el-button> -->
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <pagination
            :total="total"
            :page.sync="listQuery.pageNum"
            :limit.sync="listQuery.pageSize"
            page-sizes="[5,10]"
            @pagination="getList"
          />
        </el-card>

        <!-- 上传处理凭证弹窗 -->
        <!-- 添加/编辑对话框 -->
        <el-dialog
          :title="textMap[dialogStatus]"
          :visible.sync="dialogFormVisible"
        >
          <el-form ref="form" :model="temp" :rules="rules" label-width="150px">
            <el-form-item label="处理凭证上传：">
              <!-- :file-list="fileLists" -->
              <el-upload
                class="upload-demo"
                drag
                action="http://123.60.85.153:8080/lawServicePlatform/common/uploadFile"
                :headers="token"
                :on-success="handleFileSuccess"
                multiple
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">
                  只能上传word/pdf文件，且不超过5M
                </div>
                <!-- <div class="el-upload__tip" slot="tip" v-if="fileTips">
                  {{ this.fileTips }}
                </div> -->
              </el-upload>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false"> 取消 </el-button>
            <el-button type="primary" @click="dealOrder(row)"> 确认 </el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
// 分页功能
import Pagination from "@/components/Pagination";
// 获取当前登录账户信息
import { returnUserInformation } from "@/api/user.js";

// 服务商获取（用户）未付款 订单列表
import { nonPaymentOrderList } from "@/api/lawyerOrder.js";
// 服务商获取 待处理 订单列表（传参：pageNum，pageSize）
import { untreatedOrderList } from "@/api/lawyerOrder.js";
// 服务商获取 已处理 订单列表（传参：pageNum，pageSize）
import { treatedOrderList } from "@/api/lawyerOrder.js";
// 服务商获取 已完成 订单列表
import { finishedOrderList } from "@/api/lawyerOrder.js";

// 服务商处理订单(传参：data（{id}）,url)
import { processOrderFlag } from "@/api/lawyerOrder.js";

// 从cookie获取token
import { getToken } from "@/utils/auth";

export default {
  components: { Pagination }, // 分页
  data() {
    return {
      // 分页
      total: 0,
      listQuery: {
        pageNum: 1,
        pageSize: 5,
      },
      // 搜索
      searchState: "待处理",
      // 选择器下拉选项
      // 状态
      stateList: [
        {
          value: "未付款",
          label: "未付款",
        },
        {
          value: "待处理",
          label: "待处理",
        },
        {
          value: "已处理",
          label: "已处理（待审核）",
        },
        {
          value: "已完成",
          label: "已完成",
        },
      ],
      // 数据列表
      tableData: [],

      // 上传弹窗相关
      fileTips: "",
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "添加",
      },
      temp: {
        name: "",
        type: "",
        content: "",
        picture: "",
        state: "",
        represent: "",
      },
      // 接收上传OSS之后接口返回的文件url地址
      fileUrl: "",
      // token对象
      token: {},
      // 将正在处理的订单的id保存在本地临时变量里供后面调接口取用。
      dealingOrderId: -999,
    };
  },
  // 调用初始化，一进页面就执行。
  mounted() {
    console.log("mounted()");

    this.token["token"] = getToken();
    this.init();
  },
  methods: {
    // 初始化
    init() {
      console.log("init()");
      // 初始化先执行一次查询（默认状态：未处理）
      this.search();
    },
    // 按状态查询订单列表
    search() {
      if (this.searchState == "未付款") {
        // 服务商获取（用户）未付款 订单列表（传参：pageNum，pageSize）
        nonPaymentOrderList(
          this.listQuery.pageNum,
          this.listQuery.pageSize
        ).then((resp) => {
          this.tableData = resp.data.nonPaymentOrderList.content;
          this.total = resp.data.nonPaymentOrderList.totalSize;
        });
      } else if (this.searchState == "待处理") {
        // 服务商获取 待处理 订单列表（传参：pageNum，pageSize）
        untreatedOrderList(
          this.listQuery.pageNum,
          this.listQuery.pageSize
        ).then((resp) => {
          this.tableData = resp.data.untreatedOrderPage.content;
          this.total = resp.data.untreatedOrderPage.totalSize;
        });
      } else if (this.searchState == "已处理") {
        // 服务商获取 已处理 订单列表（传参：pageNum，pageSize）
        treatedOrderList(this.listQuery.pageNum, this.listQuery.pageSize).then(
          (resp) => {
            this.tableData = resp.data.treatedOrderList.content;
            this.total = resp.data.treatedOrderList.totalSize;
          }
        );
      } else if (this.searchState == "已完成") {
        // 服务商获取 已完成 订单列表（传参：pageNum，pageSize）
        finishedOrderList(this.listQuery.pageNum, this.listQuery.pageSize).then(
          (resp) => {
            this.tableData = resp.data.treatedOrderList.content;
            this.total = resp.data.treatedOrderList.totalSize;
          }
        );
      } else {
        // alert("bug：不在四种状态之内！");
      }
    },
    // 分页
    getList(pageObj) {
      console.log(pageObj);
      // 获取数据
      this.listQuery.pageNum = pageObj.page;
      this.listQuery.pageSize = pageObj.limit;
      this.init();
    },
    // 处理订单
    handleUpdate(row) {
      this.dealingOrderId = row.id; // 将正在处理的订单的id保存在本地临时变量里供后面调接口取用。
      this.fileTips = "可上传新的文件";
      this.dialogFormVisible = true;
    },
    // 上传OSS成功之后，调用接口接收返回url地址
    handleFileSuccess(res, file) {
      console.log(res);
      this.fileUrl = res.url;
      console.log("this.fileUrl: " + this.fileUrl);
      this.$message(res.message);
    },
    // 调用接口传参执行处理订单操作
    dealOrder() {
      // console.log("rowId"+rowId); // 弹窗这里似乎是无法通过row方式拿到当前处理订单的id的。
      let dataId = {
        id: this.dealingOrderId,
      };
      processOrderFlag(dataId, this.fileUrl).then((resp) => {
        console.log("resp.data.message: " + resp.data.message);
        // 异步执行
        this.dialogFormVisible = false; // 使弹窗关闭
        this.$message(resp.data.message); // 提示成功信息
        this.init();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 页头LOGO
.top {
  height: 50px;
  font-size: 30px;
  text-align: center;
  line-height: 50px;
}

// 大盒子
.big-back-box {
  width: 900px;
  margin: 0 auto;
}

// 原框架自带
.dashboard {
  &-container {
    margin-top: 30px;
    // margin-left: 30px;
    // margin-right: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

// 弹窗需要？
avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>